<template>
	<view>
		<view class="content">
			<view class="con_1">
				<view class="search" @click="seach">
					<u-icon name="search" color="#999999" size="28"></u-icon>
					<text class="p_left_10 c-999">搜索商品</text>
				</view>
			</view>
			<view class="con_2">
				<view class="con_2_1">
					<scroll-view scroll-y="true" :style="{height:scrollHeight + 'px'}" style="background-color: #FFFFFF;">
						<view v-for="(item,index) in classList1" @click="chooseLeft(item,index)" :key="index" class="noactive1" :class="index==num?'active':'noactive'">
							{{item.name}}
						</view>
					</scroll-view>
				</view>
				<scroll-view scroll-y="true" :style="{height:scrollHeight + 'px'}" @scrolltolower="bottomOut" lower-threshold='100'>
					<view class="con_2_2 display">
						<view class="classlist" v-for="(item,index) in shopList" :key="index" @click="gode(item)">
							<!-- <shop :shopimg="item.image" :shopname="item.title" :newprice="item.price_selling" style="background-color: #FFFFFF;"></shop> -->
							<image :src="item.image"></image>
							<view class="ft_12 c-666">
								{{item.name}}
							</view>
						</view>
					</view>
				</scroll-view>
				
			</view>
		</view>
		

	</view>
</template>

<script>
	// import shop from "../components/shop.vue"
	export default {
		data() {
			return {
				num:0, //左侧列表默认选中
				classList1:[
					{
						name:'666'
					},
					{
						name:'666'
					}
				], //分类列表
				shopList:[
					{
						name:'666'
					},
					{
						name:'666'
					},
					{
						name:'666'
					},
					{
						name:'666'
					},
					{
						name:'666'
					},
					{
						name:'666'
					},
					{
						name:'666'
					},
					{
						name:'666'
					},
					{
						name:'666'
					},
					{
						name:'666'
					},
					{
						name:'666'
					},
					{
						name:'666'
					},
					{
						name:'666'
					},
					{
						name:'666'
					},
					{
						name:'666'
					},
					{
						name:'666'
					},
					{
						name:'666'
					},
					{
						name:'666'
					},
					{
						name:'666'
					},
					{
						name:'666'
					}
				], //商品列表
				classid:"", //类别id
				
				scrollHeight:"", //滚动高度
				page:1, //页数
				
			}
		},
		onLoad(e) {
			console.log(e);
			// this.getClass() //获取分类
			this.getscrollheight() //计算滚动高度
			this.getclasslist(e.classid) //获取分类信息
			// if(e.classid){
			// 	this.classid=e.classid
			// }
		},
		methods: {
			is_login(){ //判断是否登录
				// #ifdef MP-WEIXIN
				if(!uni.getStorageSync("user")){
					uni.reLaunch({
						url:"../../mine/pages/login/login"
					})
					return
				}else{}
				// #endif
			},
			getclasslist(classid){ //获取分类信息
				// console.log(classid);
				this.$myRequest('goods/cate',{})
				.then(res=>{
					console.log(res.data);
					this.classList1=res.data.data.cate //一级分类
					if(!classid){
						this.shopList=this.classList1[0].cate //二级分类
						return
					}
					this.classList1.forEach((i,v)=>{
						if(i.id==classid){
							this.num=v
							this.shopList=this.classList1[v].cate //二级分类
						}
					})
				})
			},
			
			seach(){ //去搜索
				this.is_login() //判断是否登陆
				uni.navigateTo({
					url:"../../mine/pages/index/search"
				})
			},
			gode(item){ //去分类商品列表
				this.is_login() //判断是否登陆
				console.log(item);
				uni.navigateTo({
					url:"../../mine/pages/index/search?title="+item.name+"&classid="+item.id
				})
			},
			
			getscrollheight(){ //计算滚动高度
				let statusBarHeight=uni.getStorageSync('statusBarHeight') //状态栏高度
				let windowHeight=uni.getStorageSync('windowHeight') //窗口高度
				// #ifdef MP-WEIXIN
				this.scrollHeight=windowHeight - 99
				// #endif
				// #ifdef APP-PLUS || H5
				this.scrollHeight=windowHeight - 99
				// #endif
				console.log(this.scrollHeight);
			}, 
			bottomOut(e){ //二级分类触底
				let id=this.classList1[this.num].id //类别id
			},
			chooseLeft(item,e){ //商品列表
				this.num=e
				this.shopList=this.classList1[e].cate //二级分类
			},
			
			
		},
		
	}
</script>

<style lang="scss">
page{
	background: #FAFAFA;
}
.con_1{
	padding: 50px 15px 0;
	.search{
		border-radius: 30px;margin: 0 auto;
		padding: 10px 15px;
		background-color: #FFFFFF;
	}
}
.con_2{
	display: flex;align-items: flex-start;
	padding-top: 10px;
	.con_2_1{
		background-color: #FFFFFF;
		.active{
			background: linear-gradient(180deg, #F1A421 0%, #E4741F 100%);
			// border-left: 8rpx solid #F38613;
			// background-color: #fafafa;
			color: #ffffff;
			border-radius: 0 8px 0 0;
		}
		.noactive{
			border-left: 8rpx solid transparent;
			background-color: #ffffff;
			color: #666666;
		}
		.noactive1{
			width: 200rpx;height: 80rpx;
			text-align: center;line-height: 80rpx;font-size: 24rpx;
		}
	}
	.con_2_2{
		flex-flow: wrap;
		padding: 12px;
		.classlist{
			text-align: center;width: 30%;margin-bottom: 20px;
			image{
				width: 40px;height: 40px;margin-bottom: 5px;
				border-radius: 5px;
			}
		}
	}
}


</style>
